<template>
  <!-- 积分操作 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">

      <el-row>
        <el-row>
          <el-col :span="12">

            <el-form-item prop="member_name" label="姓名">
              <el-input v-model="dataForm.member_name" placeholder="姓名" clearable disabled minlength="1" maxlength="20" show-word-limit />
            </el-form-item>

            <el-form-item prop="mobile" label="手机号">
              <el-input v-model="dataForm.mobile" placeholder="手机号" disabled maxlength="11" clearable show-word-limit />
            </el-form-item>

            <el-form-item prop="openid" label="OPENID">
              <el-input v-model="dataForm.openid" placeholder="微信公众号OPENID" disabled clearable />
            </el-form-item>

          </el-col>
          <el-col :span="12">

            <el-form-item prop="card_no" label="卡号">
              <el-input v-model="dataForm.card_no" placeholder="卡号" disabled clearable />
            </el-form-item>

            <el-form-item prop="level_name" label="等级">
              <el-input :value="dataForm.level_name" placeholder="等级" disabled clearable />
            </el-form-item>

            <el-form-item prop="card_id" label="ID">
              <el-input v-model="dataForm.card_id" placeholder="会员ID" disabled clearable />
            </el-form-item>

          </el-col>
        </el-row>
      </el-row>

      <el-form-item prop="status" label="操作">
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="0">充值</el-radio>
          <el-radio :label="1">扣减</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item prop="credit" label="积分">
        <el-input v-model="dataForm.credit" placeholder="请输入积分(必填)" clearable />
      </el-form-item>

      <el-form-item prop="note" label="备注">
        <el-input v-model="dataForm.note" placeholder="请输入备注以方便追溯历史原因(必填)" clearable maxlength="10" show-word-limit />
      </el-form-item>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 积分操作
 */
export default {
  name: 'Credit',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '积分操作',
      dataForm: {},
      rules: {
        credit: [
          { required: true, message: '请输入积分', trigger: ['blur'] }
        ],
        note: [
          { required: true, message: '请输入备注', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // console.log(newVal + '---------------' + oldVal)
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        // 初始化对象属性
        const newForm = {
          note: ''
        }
        this.dataForm = this.$u.deepMerge(newForm, this.data)
        this.$u.deepClone(this.data)
        const { member_name } = this.dataForm
        this.title = '积分操作:查询【' + member_name + '】'
        // 初始化数据
        this.dataForm.status = 0
        this.dataForm.credit = 0
        this.dataForm.note = '权益直充与扣减'

        // console.log(this.dataForm)
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const { card_id, card_no, status, credit, note } = self.dataForm
      if (!self.$u.test.digits(credit)) {
        this.$u.msg('积分必须为整数', 'error')
        return
      }
      if (!self.$u.test.range(credit, [1, 1000000])) {
        this.$u.msg('积分不在"1-1000000"这个范围内', 'error')
        return
      }
      let tips = '您确定充值' + credit + '积分,请谨慎操作'
      if (status === 1) {
        tips = '您确定扣除' + credit + '积分,请谨慎操作'
      }
      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          self.$confirm(tips, '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            // 转换数值
            const credit2 = status === 1 ? -credit : credit
            const data = { card_id, card_no, 'credit': credit2, note }
            self.api.credit(data).then(() => {
              // 通知信息
              self.$u.msg('操作成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            }).catch(() => {
            })
          }).catch(() => {
          })
        }
      })

      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
